<template>
  <router-link
    :to="{ name: 'NewsDetail', query: { id: props.data.id, type: props.type } }"
  >
    <div class="news-card w-full box-border p-24px bg-white flex mb-20px">
      <img
        :src="props.data.infoPicUrl"
        class="h-176px w-276px mr-40px object-cover"
        alt=""
      />
      <div class="flex flex-1 flex-col h-176px">
        <h2
          class="font-size-22px lh-32px fw-500 mb-24px card-title single-overflow"
        >
          {{ props.data.infoTitle }}
        </h2>
        <p class="text-light lh-26px news-content">
          {{ props.data.infoSimpleDesc }}
        </p>
        <div class="other-info flex-1">
          <div>
            <el-icon><User /></el-icon>
            <span>作者：{{ props.data.createBy }}</span>
          </div>
          <div>
            <el-icon><Link /></el-icon>
            <span>来源：{{ NEWS_FROM_ENUM[props.data.infoFrom] }}</span>
          </div>
          <!-- <div>
            <el-icon><FolderChecked /></el-icon>
            <span>订阅数：{{ props.data.subscribeNum || 0}}</span>
          </div> -->
          <div>
            <el-icon><Clock /></el-icon>
            <span>时间：{{ props.data.createTime.slice(0, 16) }}</span>
          </div>
        </div>
      </div>
    </div>
  </router-link>
</template>

<script setup>
import { User, Link, FolderChecked, Clock } from "@element-plus/icons-vue";
import { NEWS_FROM_ENUM } from "@/const";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  type: String,
});
</script>

<style lang="less" scoped>
.news-card {
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.02);
  &:hover {
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
    .card-title {
      color: @main-color;
    }
  }
}
.news-content {
  .multiline-overflow(3);
}
.other-info {
  display: flex;
  align-items: flex-end;
  color: @text-light;
  font-size: 14px;
  > div {
    display: inline-flex;
    margin-right: 55px;
    align-items: center;
    .el-icon {
      font-size: 16px;
    }
    > span {
      margin-left: 3px;
    }
  }
}
</style>
